<template>
    <div class="question-view-wrap" v-loading="loading">
        <el-row type="flex" class="type-item-wrap">
            <el-col :span="2">
                <p class="type-title">题目:</p>
            </el-col>
            <el-col :span="22">
                <div>
                    <p class="question-content">{{ info.content }}</p>
                    <!-- 题干图片 -->
                    <div v-if="info.contentPics" class="question-pic">
                        <img v-for="(item,i) in info.contentPics.split(',')"  :key="i" :src="item||defaultImg" width="100" height="100" @click="$imgPreview" :data-imgpreview="info.contentPics" :data-imgpreviewindex="i"/>
                    </div>
                    <!-- 题干视频 -->
                    <div v-if="info.video" class="question-video">
                        <video :src="info.video" controls="controls" height="200" width="300"></video>
                    </div>
                </div>
            </el-col>
        </el-row>
        <el-row type="flex" class="type-item-wrap">
            <el-col :span="2">
                <p class="type-title">选项:</p>
            </el-col>
            <el-col :span="22">
                <el-row class="question-option-list" v-for="(item, index) in optionList" :key="index">
                    <el-col :span="1">
                        <el-checkbox v-if="info.questionType==3" v-model="item.isAnswer" :label="1" :true-label="1" :false-label="0" disabled>{{''}}</el-checkbox>
                        <el-radio v-else v-model="item.isAnswer" :label="1" disabled>{{''}}</el-radio>
                    </el-col>
                    <el-col :span="23">
                        <p v-if="info.questionType==1">{{ item.optionContent }}</p>
                        <p v-else>{{ item.optionMark + '、' + item.optionContent }}</p>
                    </el-col>
                </el-row>
            </el-col>
        </el-row>
        <el-row type="flex" class="type-item-wrap">
            <el-col :span="2">
                <p class="type-title">解析:</p>
            </el-col>
            <el-col :span="22">
                <div v-if="info.analysisContent || info.analysisPics">
                    <p class="analysis-content">{{ info.analysisContent }}</p>
                    <!-- 解析图片 -->
                    <div v-if="info.analysisPics" class="analysis-pic">
                        <img v-for="(item,i) in info.analysisPics.split(',')"  :key="i" :src="item||defaultImg" width="100" height="100" @click="$imgPreview" :data-imgpreview="info.analysisPics" :data-imgpreviewindex="i"/>
                    </div>
                </div>
                <p v-else>无</p>
            </el-col>
        </el-row>
    </div>
</template>
<script>
import { getQuestionOptionInfo } from '@/api/exam'

export default {
    name: 'QuestionView',
    props: {
        info: {
            type: Object,
            default() {
                return {}
            }
        }
    },
    data() {
        return {
            loading: true,
            defaultImg: this.GLOBAL.defaultImg,
            optionList: []
        }
    },
    created() {
        let that = this
        // 获取选项
        getQuestionOptionInfo({
            questionId: that.info.id
        }).then(res => {
            if(res.status === 200) {
                that.optionList = res.data
            }
            // 移除加载遮罩
            that.loading = false
        })
    },
    methods: {
        
    }
}
</script>
<style lang="scss" scoped>
.question-view-wrap {
    .type-item-wrap {
        line-height: 40px;
        .type-title {
            color: #409eff;
            font-size: 16px;
            font-weight: bold;
            text-align: center;
        }
        .question-pic {
            display: flex;
            img {
                margin-right: 20px;
            }
        }
    }
}
</style>
